<template>
  <div class="views" id="views">
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import { App } from '@/assets/App/App'
import { GUI } from 'three/examples/jsm/libs/dat.gui.module.js'

const app = new App()
export default {
  data () {
    return {
      params: {
        methods: {
          animation: true, // 循环调用渲染
          renderer: true, // 应用渲染器
          light: true, // 在场景中加入全景光
          controls: true, // 使用轨道控制器，鼠标滚轮控制放大缩小，左键拖动绕中心点旋转，右键拖动中心点。
          statement: true // 在控制台打印声明，与本案例无关，可忽略。
        },
        events: {
          windowResize: true // 监听窗口尺寸变化，并改变渲染页面尺寸
        },
        params: {
          container: null, // 渲染结果输出dom页面
          renderer: [
            'WebGLRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true // 抗锯齿，可忽略。
          }
        }
      },
      effectController: {
        turbidity: 10,
        rayleigh: 2,
        mieCoefficient: 0.005,
        mieDirectionalG: 0.8,
        luminance: 1,
        inclination: 0.49, // elevation / inclination
        azimuth: 0.25, // Facing front,
        sun: !true
      }
    }
  },
  mounted () {
    this.params.params.container = document.getElementById('container') // 获取渲染结果输出dom页面
    /**
     * 初始化场景
     */
    app.init(this.params, (scene, camera, renderer) => {
      camera.position.set(1000, 100, 1000) // 修改相机位置
    })
    /**
     * 导入模型
     */
    app.addModel({
      url: 'static/model/fbx/cqcet/15/实训楼.FBX', // 模型地址
      type: 'fbx' // 模型格式
    }, () => { // 加载完成回调，可忽略。
      console.log('模型加载完成')
    })
    /**
     * 应用天空
     */
    app.addSky()
    /**
     * 添加Gui（更多用法请自行查找）
     */
    var gui = new GUI()
    this.gui = gui
    gui.add(this.effectController, 'turbidity', 1.0, 20.0, 0.1).onChange(this.guiChanged)
    gui.add(this.effectController, 'rayleigh', 0.0, 4, 0.001).onChange(this.guiChanged)
    gui.add(this.effectController, 'mieCoefficient', 0.0, 0.1, 0.001).onChange(this.guiChanged)
    gui.add(this.effectController, 'mieDirectionalG', 0.0, 1, 0.001).onChange(this.guiChanged)
    gui.add(this.effectController, 'luminance', 0.0, 2).onChange(this.guiChanged)
    gui.add(this.effectController, 'inclination', 0, 1, 0.0001).onChange(this.guiChanged)
    gui.add(this.effectController, 'azimuth', 0, 1, 0.0001).onChange(this.guiChanged)
    gui.add(this.effectController, 'sun').onChange(this.guiChanged)
  },
  methods: {
    /**
     * gui改变事件
     */
    guiChanged () {
      var distance = 400000

      var uniforms = app.sky.material.uniforms
      uniforms['turbidity'].value = this.effectController.turbidity
      uniforms['rayleigh'].value = this.effectController.rayleigh
      uniforms['mieCoefficient'].value = this.effectController.mieCoefficient
      uniforms['mieDirectionalG'].value = this.effectController.mieDirectionalG
      uniforms['luminance'] = { value: this.effectController.luminance }

      var theta = Math.PI * (this.effectController.inclination - 0.5)
      var phi = 2 * Math.PI * (this.effectController.azimuth - 0.5)

      app.sunSphere.position.x = distance * Math.cos(phi)
      app.sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta)
      app.sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta)

      app.sunSphere.visible = this.effectController.sun

      uniforms['sunPosition'].value.copy(app.sunSphere.position)
    }
  },
  beforeDestroy () {
    this.gui.destroy()
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
